<template>
  <div class="app-container">
    <!-- 添加或修改考试报名对话框 -->
    <el-form ref="form" :model="form" label-width="200px">
      <el-row>
        <el-col :span="8">
          <el-form-item label="报名职业：">
            {{ form.vocationText }}
          </el-form-item>
        </el-col>
        <!--        <el-col :span="8">-->
        <!--          <el-form-item label="报名等级：">-->
        <!--            {{ form.levelText }}-->
        <!--          </el-form-item>-->

        <!--        </el-col>-->
      </el-row>
      <el-row>
        <el-col :span="8">
          <el-form-item label="登记表：">
            <img :src="baseUrl+photo.register" alt="Image" width="100" height="100"
                 @click="preview(baseUrl+photo.register)">
          </el-form-item>
        </el-col>
        <!--        <el-col :span="8">-->
        <!--          <el-form-item label="报名等级：">-->
        <!--            {{ form.levelText }}-->
        <!--          </el-form-item>-->

        <!--        </el-col>-->
      </el-row>
      <el-row>
        <el-col :span="4">
          <el-form-item label="证件照：">
            <img :src="baseUrl+photo.idPhoto" alt="Image" width="100" height="100"
                 @click="preview(baseUrl+photo.idPhoto)">
          </el-form-item>
        </el-col>
        <el-col :span="16">
          <el-form-item label="身份证：">
            <img :src="baseUrl+photo.cardFront" alt="Image" width="100" height="100"
                 @click="preview(baseUrl+photo.cardFront)">
            <img :src="baseUrl+photo.cardBack" alt="Image" width="100" height="100" style="margin-left: 30px"
                 @click="preview(baseUrl+photo.cardBack)">
          </el-form-item>
        </el-col>
      </el-row>


      <el-row>
        <el-col :span="4">
          <el-form-item label="是否2000年后毕业" prop="eduFlag">
            {{ form.eduFlag === 'Y' ? '是' : '否' }}
          </el-form-item>
        </el-col>

        <el-col :span="6">
          <el-form-item label="毕业证书" prop="graduation" v-if="photo.graduation">
            <img :src="baseUrl+photo.graduation" alt="Image" width="100" height="100"
                 @click="preview(baseUrl+photo.graduation)">
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="学历承若书" prop="graduateCommit" v-if="photo.graduateCommit">
            <img :src="baseUrl+photo.graduateCommit" alt="Image" width="100" height="100"
                 @click="preview(baseUrl+photo.graduateCommit)">
          </el-form-item>
        </el-col>

        <el-col :span="4">
          <el-form-item label="学历证书电子注册备案表" prop="eduFlag" v-if="photo.education">
            <el-col v-if="photo.education">
              <a @click="handleExport(photo.education)"> 下载</a>
            </el-col>
            <el-col v-else>
              暂无
            </el-col>
            <!--            <img :src="photo.education" alt="Image" width="100" height="100" v-if="photo.education" @click="preview(photo.education)">-->
          </el-form-item>
        </el-col>


      </el-row>


      <el-row>
        <el-col :span="20">
          <el-form-item label="考证记录：" v-if="photo.record">
            <el-col :span="4"  v-for="item in photo.record.split(',')">
              <img :src="baseUrl+item" alt="Image" width="100" height="100" @click="preview(baseUrl+item)">
            </el-col>
          </el-form-item>
        </el-col>
      </el-row>

      <el-row>
        <el-col :span="4">
          <el-form-item label="是否工龄报名" prop="seniorityFlag">
            {{ form.seniorityFlag === 'Y' ? '是' : '否' }}
          </el-form-item>
        </el-col>

        <el-col :span="20">
          <el-form-item label="社保权益">
            <el-col :span="4" v-for="item in photo.social.split(',')">
              <img :src="baseUrl+item" alt="Image" width="100" height="100" @click="preview(baseUrl+item)">
            </el-col>
          </el-form-item>
        </el-col>
      </el-row>


      <el-row v-if="form.seniorityFlag === 'Y'">
        <el-col :span="4">
          <el-form-item label="工作年限承诺书" prop="seniorityFlag">
            <img :src="baseUrl+photo.commitment" alt="Image" width="100" height="100"
                 @click="preview(baseUrl+photo.commitment)">
          </el-form-item>
        </el-col>

        <el-col :span="12">
          <el-form-item label="工作证明">
            <el-col :span="8">
              <img :src="baseUrl+photo.prove" alt="Image" width="100" height="100"
                   @click="preview(baseUrl+photo.prove)">
            </el-col>
          </el-form-item>
        </el-col>
      </el-row>


      <!--      <el-row>-->
      <!--        <el-form-item label="工作履历">-->
      <!--          <el-table :data="form.resumeList">-->
      <!--            <el-table-column label="工作时间" align="center">-->
      <!--              <template slot-scope="scope">-->
      <!--                <span>{{ scope.row.startDate }} 至 {{ scope.row.endDate }}</span>-->
      <!--              </template>-->
      <!--            </el-table-column>-->
      <!--            <el-table-column label="工作单位" align="center" key="company" prop="company"/>-->
      <!--            <el-table-column label="岗位" align="center" key="post" prop="post"/>-->
      <!--          </el-table>-->
      <!--        </el-form-item>-->
      <!--      </el-row>-->

      <el-row>
        <el-form-item label="修改意见" prop="remark" v-if="form.status!=='30'">
          <el-input v-model="form.remark" maxlength="500"/>
        </el-form-item>
      </el-row>
      <el-row v-if="form.status==='00'" style="text-align:center">
        <el-button type="primary" @click="handleToApproveYes">通 过</el-button>
        <el-button @click="handleToApproveNo('10')">驳 回</el-button>

      </el-row>


      <el-row v-else-if="form.status==='30'" style="text-align:center">
        <el-button type="primary" @click="handleToBack()">返 回</el-button>
      </el-row>


    </el-form>

    <el-dialog title="考试时间" :visible.sync="examTimeOpen" width="1200px" append-to-body>
      <el-form>
        <el-form-item label="考试时间" prop="examTime">
          <el-date-picker
            v-model="examTime"
            type="date"
            clearable
            :editable="false"
            value-format="yyyy-MM-dd"
            placeholder="选择考试日期"
            style="width: 100%"
          >
          </el-date-picker>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitExamTime">确 定</el-button>
        <el-button @click="cancel">取 消</el-button>
      </div>
    </el-dialog>


    <el-dialog title="预览" :visible.sync="open" width="1200px" append-to-body>
      <img :src="previewPhoto" alt="Image" width="1000">
    </el-dialog>


    <el-dialog title="预览pdf" :visible.sync="openPdf" width="1200px" append-to-body>
      <pdf :src="previewPdf"></pdf>
    </el-dialog>


  </div>
</template>

<script>
import {getExam, approvedExam} from "@/api/system/exam"
import pdf from 'vue-pdf'

export default {
  name: "ExamDetail",
  components: {pdf},
  data() {
    return {
      examTime: '',
      // 遮罩层
      examTimeOpen: false,
      open: false,
      previewPhoto: '',
      openPdf: false,
      previewPdf: '',
      // 表单参数
      form: {},
      baseUrl: process.env.VUE_APP_BASE_API,
      photo: {
        cardBack: "",
        cardFront: "",
        education: "",
        graduation: "",
        idPhoto: "",
        record: "",
        social: ""
      },


    }
  },
  created() {
    const examId = this.$route.params && this.$route.params.examId
    this.getInfo(examId)
  },
  methods: {
    handleToBack() {
      this.$tab.closePage();
    },

    submitExamTime() {
      if (this.examTime === "") {
        this.$modal.alertError("请选择考试日期")
      } else {
        this.handleToApprove('30')
      }
    },
    cancel() {
      this.examTimeOpen = false
    },

    handleToApproveYes(type) {
      this.examTime = ''
      this.examTimeOpen = true

    },
    handleToApproveNo(type) {
      if (this.form.remark === '') {
        this.$modal.alertError("请填写修改意见")
      } else {
        this.handleToApprove(type)
      }

    },
    handleToApprove(type) {
      this.$modal.loading()
      approvedExam({
        examId: this.form.examId,
        status: type,
        remark: this.form.remark,
        examTime: this.examTime
      }).then((res) => {
        this.$modal.closeLoading()
        this.$tab.closePage();
      })

    },
    preview(src) {
      this.open = true
      this.previewPhoto = src
    },
    /** 查询考试报名列表 */
    getInfo(examId) {
      this.$modal.loading()
      getExam(examId).then(response => {
        this.form = response.data
        this.form.remark = ""
        response.data.annexList.forEach((item) => {
          // if (item.annexType !== 'social') {
          //   this.photo[item.annexType] = process.env.VUE_APP_BASE_API + item.annexPath
          // } else {
          this.photo[item.annexType] = item.annexPath
          // }
        })
        // console.log(this.photo.social.split(','))
        this.$modal.closeLoading()
      }).catch(() => {
        this.$modal.closeLoading()
      })
    },
    /** 导出按钮操作 */
    async handleExport(fileName) {
      this.openPdf = true

      this.previewPdf =this.baseUrl+ fileName
      // this.$download.resource(fileName);
    },

  }
}
</script>
